<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </van-pull-refresh>
</template>
<script>
export default {
  name: 'MyPage',
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      refreshing: false,
    }
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // 一个axios请求函数
      const {data: res} = await initList()

      //将数据储存在数组后方
      this.list = [...this.list, ...res]

      // 加载状态结束
      this.loading = false

      //如果请求的数据为空
      if (res.length === 0) {
        this.finished = true
      }
    },
    async onRefresh() {
      // 异步更新数据
      // 一个axios请求函数
      const {data: res} = await initList()

      //将数据储存在数组前方
      this.list = [...res, ...this.list]

      // 加载状态结束
      this.refreshing = false

      //如果请求的数据为空
      if (res.length === 0) {
        this.finished = true
      }
    },
  },
}
</script>
<style lang="less" scoped></style>
